<template>
  <div class="ta_item" @click="goAblum">
    <div class="img">
      <img
        src="../../../assets/icon/common/tingbg.png"
        alt=""
        class="icon_bg"
      />
      <div class="icon">
        <img v-lazy="`https://imagev2.xmcdn.com/${img}`" alt="" />
      </div>
    </div>
    <div class="info">
      <div class="title">{{ title }}</div>
      <div class="des">{{ customTitle }}</div>
      <div class="count">
        <div class="play"><i class="font_family icon-Headset-2"></i>&nbsp;&nbsp;{{ statCountInfo.playCount | getCount }}</div>
        <div class="num"><i class="font_family icon-Headset-2"></i>&nbsp;&nbsp;{{ statCountInfo.trackCount }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
    },
    img: {
      type: String,
    },
    title: {
      type: String,
    },
    statCountInfo: {
      type: Object,
    },
    customTitle: {
      type: String,
    },
  },
  methods:{
      goAblum(){
          this.$router.push('/album/'+this.id)
      }
  }
};
</script>

<style lang="scss" scoped>
.ta_item {
display: flex;
align-items: center;
background-color: #f3f3f3;
  .img {
    margin-right: 15px;
    width: 65px;
    height: 56px;
    position: relative;

    > img {
      width: 100%;
      height: 100%;
    }
    .icon {
      position: absolute;
      left: 6px;
      top: 0;
      width: 49px;
      height: 52px;
      > img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .info {
    width: 240px;
    .title,
    .des {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .title {
      font-size: 16px;
      line-height: 22px;
      color: #000;
      margin: 4px 8px 4px 0;
    }
    .des {
      font-size: 14px;
      line-height: 20px;
      color: #999;
    }
    .count {
      font-size: 12px;
      line-height: 17px;
      color: #999;
     display: flex;
      height: 17px;
      margin: 4px 0;
        .play,.num{
            margin-right: 15px;
        }
    }
  }
}
</style>
